<template>
  <el-container>
    <el-header class="header">
        <h1>物联网水利平台管理系统</h1>
    </el-header>
    <el-container>
      <!-- 左侧 Sidebar -->
      <el-aside width="200px" class="aside">
        <el-menu router :default-active="route.path">
          <!-- 添加菜单项 -->
          <el-menu-item index="/" class="control-panel">控制面板</el-menu-item>
          <el-menu-item index="/sys/user">用户管理</el-menu-item>
          <!-- 更多菜单项... -->
        </el-menu>
      </el-aside>

      <!-- 右侧 Main 区域 -->
      <el-main class="main">
        <!-- 如果有路由，放置在此处以显示路由对应的视图,此处为子路由入口-->
        <router-view/>
      </el-main>
    </el-container>

    <!-- 底部 Footer -->
    <el-footer class="footer">
      <p>版权所有 © 2025</p>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();


</script>

<style scoped>
.header {
  background-color: #303133;
  color: #fff;
  padding: 20px;
}

.aside {
  background-color: #ebeef5;
}

.main {
  padding: 20px;
}

.footer {
  text-align: center;
  padding: 20px;
  background-color: #f8f2f5;
}
</style>
